<%@page import="com.alibaba.fastjson.JSONObject"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path;
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>物品入库-云校通_教师版</title>
<meta name="viewport"
	content="width=device-width,initial-scale=1,user-scalable=0">
<link rel="stylesheet" href="<%=basePath%>/style/icon.css" />
<link rel="stylesheet" href="<%=basePath%>/style/weui4.css" />
<link rel="stylesheet" href="<%=basePath%>/style/weui5.css" />
<link rel="stylesheet" href="<%=basePath%>/style/weui_parents.css" />
<link rel="stylesheet" href="<%=basePath%>/style/spicon.css" />
<style>
.hb_choose {
	top: 50% !important;
	margin-top: -156px !important;
	margin-bottom: 10px;
}

.no_border {
	border: none !important;
	height: 180px;
}

.no_border .atype {
	width: 100%;
}

.no_border textarea {
	width: 84%;
	min-height: 80px;
	margin-left: 11%;
	margin-top: 4px;
	border-radius: 4px;
	background: #f8f8f8;
	border: 1px solid #d9d9d9;
	outline: none;
	padding-top: 10px;
	text-indent: 14px;
}

.ry_add_main {
	margin-bottom: 10px;
	background: #fff;
}

.ry_add_main ul {
	width: 100%;
	clear: both;
	display: inline-block;
	border-bottom: 1px solid #ededed;
}

.ry_add_main li {
	display: inline-block;
	float: left;
	height: 42px;
}

.ry_add_main li img {
	margin-left: 10px;
	margin-top: 12px;
	width: 18px;
	height: 18px;
}

.ry_add_main li p {
	margin-left: 10px;
	line-height: 42px;
}

.ry_add_main li input {
	position: absolute;
	right: 4%;
	border-style: none;
	outline-style: none;
	width: 60%;
	height: 42px;
	font-size: inherit;
	color: #d0d0d0;
	text-align: right;
}

.input_select {
	text-align: right;
	text-transform: none;
}

.weui_btn_area {
	display: block;
	margin-top: 40px !important;
	padding-bottom: 70px !important;
}

.sc_width {
	position: absolute;
	right: 20px;
	display: block;
	width: 60%;
}

.sc_btn {
	position: relative;
	left: 80%;
	top: 14px;
	width: 46px;
	height: 22px;
	background: #10ffae;
	line-height: 22px;
	text-align: center;
	border-radius: 4px;
	font-size: 16px;
	color: #fff;
}

#form {
	position: relative;
	top: -10px;
}

.sc_dispear {
	margin-top: 8px;
	opacity: 0;
}

.line {
	position: relative;
	top: -8px;
	width: 100%;
	height: 1px;
	background: #ccc;
}

.hb_choose ul li {
	color: #81cbf6;
	text-align: center;
	height: 42px;
	line-height: 42px;
	border-top: 1px solid #ededed;
}
.hb_choose span{
	position: absolute; top: 18px; right: 6%;
	font-size: 12px;
	color: #81cbf6;
}
.hb_choose input{
	position: relative; left: 4%;
	width: 92%; height: 30px;
	text-align: center;
	margin-bottom: 10px;
	border: 1px solid #ccc;
	border-radius: 4px;
}
</style>
</head>
<body>
	<jsp:include page="/WEB-INF/page/common/_header.jsp"></jsp:include>
	<div class="weui-header bg-blue">
		<div class="weui-header-left">
			<a onclick="back()" class="icon icon-109 f-white">返回</a>
		</div>
		<h1 class="weui-header-title">新建库存</h1>
	</div>
 <div id="main">
	<!-- 类别选择 -->
	<div class="hide_bd" id="div1" v-bind:style="{display:showOrHidden}" style="position:fixed;top:0"></div>
	<div class="hb_choose" id="div2" v-bind:style="{display:showOrHidden}">
		<h1>物品类别</h1>
		<ul v-for="item in type">
		<li v-on:click="hiddenDiv($event,0)" :id="item.id" :value="item.cycleUse">{{item.typeName}}</li></ul>
	</div>
	
	<!-- 物品名称选择 -->
	<div class="hide_bd" id="div3" v-bind:style="{display:showOrHidden1}" style="position:fixed;top:0"></div>
	<div class="hb_choose" id="div4" v-bind:style="{display:showOrHidden1}">
		<h1>物品名称</h1>
		<span v-show="!showAdd" @click="addData"><i class="icon icon-34"></i></span>
		<span v-show="showAdd" @click="saveData" class="weui_btn bg-blue-b weui_btn_mini">保存</span>
		<input v-show="showAdd" type="text" v-model="dataName">
		<ul>
			<li v-for="item in name" v-on:click="hiddenDiv($event,1)" :id="item.id">{{item.goodsName}}</li>
		</ul>
	</div>
	
	<!-- 物品属性选择选择 -->
	<div class="hide_bd" id="div5" v-bind:style="{display:showOrHidden2}" style="position:fixed;top:0"></div>
	<div class="hb_choose" id="div6" v-bind:style="{display:showOrHidden2}">
		<h1>物品属性</h1>
		<span v-show="!showAttr" @click="addAttr"><i class="icon icon-34"></i></span>
		<span v-show="showAttr" @click="saveAttr"  class="weui_btn bg-blue-b weui_btn_mini">保存</span>
		<input v-show="showAttr" type="text" v-model="dataAttr">
		<ul>
		<li v-for="item in attr" v-on:click="hiddenDiv($event,2)" :id="item.id" >{{item.googsAttr}}</li></ul>
	</div>
	
	<div class="ry_add_main">
		<ul id="sBtn">
			<li><img src="<%=basePath%>/images/wupinleib@2x.png"></li>
			<li><p>物品类别</p></li>
			<li><input class="input_select" readonly="readonly" v-on:click="alertDiv(0)" v-model="post_form.typeName"/></li>
		</ul>
		<ul>
			<li><img src="<%=basePath%>/images/wupinmingc@2x.png"></li>
			<li><p>物品名称</p></li>
			<li><input class="input_select" type="text" placeholder="请输入物品名称" v-on:click="alertDiv(1)" v-model="post_form.goodsName"></li>
		</ul>
		<ul>
			<li><img src="<%=basePath%>/images/xinghao@2x.png"></li>
			<li><p>型号</p></li>
			<li><input class="input_select" type="text" placeholder="请输入物品型号" v-on:click="alertDiv(2)" v-model="post_form.goodsAttr"></li>
		</ul>
		<ul>
			<li><img src="<%=basePath%>/images/shuliang@2x.png"></li>
			<li><p>数量</p></li>
			<li><input type="text" v-model="post_form.number"/></li>
		</ul>
		<ul>
			<li><img src="<%=basePath%>/images/danjia@3x.png"></li>
			<li><p>单价</p></li>
			<li><input type="number" v-model="post_form.price"/></li>
		</ul>
		<ul>
			<li><img src="<%=basePath%>/images/cunfangdiand@2x.png"></li>
			<li><p>存放地点</p></li>
			<li><input type="text" v-model="post_form.placeSite"/></li>
		</ul>
		<ul id="tBtn">
			<li><img src="<%=basePath%>/images/goumairiq@2x.png"></li>
			<li><p>购买日期</p></li>
			<li><input type="datetime-local" class="weui_input" v-model="post_form.buyTime" /></li>
		</ul>
		<ul class="no_border">
			<li><img src="<%=basePath%>/images/miaoshu@3x.png"></li>
			<li><p>描述</p></li>
			<li class="clear atype">
			     <textarea class="clear" placeholder="请详细描述借用用途" style="resize: none;"  v-model="post_form.describe"></textarea>
			</li>
		</ul>
		<div class="line"></div>
		<div class="weui_btn_area clear">
			<a href="javascript:(0)" class="weui_btn bg-blue" @click="submitForm">提交</a>
		</div>
	</div>
</div>
	<script src="<%=basePath%>/js/vue.js"></script>
	<script>
		var vm = new Vue({
			el : '#main',
			data : {
				type : [],
				name : [],
				attr : [],
				post_form:{
					    goodsNameId:null,
					    goodsAttrId:null,
					    buyTime:null,
						inputId:null,
						typeId:null,
						typeName:'请选择',
						goodsName:null,
						googsAttr:null,
						number:null,
						price:null,
						describe:null,
						placeSite:null,
						cycleUse:null
				},
				showOrHidden : 'none',
				showOrHidden1 : 'none',
				showOrHidden2 : 'none',
				showAdd : false,
				dataName : '',
				showAttr : false,
				dataAttr : ''
			},
			methods : {
				addData: function () {
					this.showAdd = !this.showAdd;
					this.dataName = null;
				},
				saveData: function () {
					this.showAdd = !this.showAdd;
					if(this.dataName != '' && this.dataName != null){
					   this.name.push({id: null, goodsName: this.dataName});
					   this.post_form.goodsName = this.dataName;
					}
				},
				addAttr: function () {
					this.dataAttr = null;
					this.showAttr = !this.showAttr;
				},
				saveAttr: function () {
					this.showAttr = !this.showAttr;
					if(this.dataAttr !='' && this.dataAttr != null){
					   this.attr.push({id: null, googsAttr: this.dataAttr});
					   this.post_form.googsAttr = this.dataAttr;
					}
				},
				alertDiv : function(flag) {
					if(flag === 0)
					    this.showOrHidden = 'block'
					else if(flag === 1){
						var typeId = this.post_form.typeId;
						if(typeId != null){
							for(var i = 0;i < this.type.length;i++){
								if(this.type[i].id == typeId){
									this.name = this.type[i].names;
								}
							}
						  this.showOrHidden1 = 'block';
						}else{
							$.alert("请先选择类别","");
						}
					}else if(flag === 2){
				    	var nameId = this.post_form.goodsNameId;
				    	var name =  this.post_form.goodsName;
				    	if(nameId != null && nameId != ''){
							for(var j = 0;j < this.name.length;j++){
								if(this.name[j].id == nameId){
									this.attr = this.name[j].attrs;
								}
							}
				    	    this.showOrHidden2 = 'block'
						}else if(name != null && name != ''){
							this.showOrHidden2 = 'block'
						}else{
							$.alert("请选择物品名称","");
						}
				    }else{}
				},
			    hiddenDiv: function(item,flag){
			    	
			    	var dom = item.target;
			    	if(flag === 0){
					    this.showOrHidden = 'none'
					    this.post_form.typeId = dom.id
					    this.post_form.typeName = dom.innerHTML;
					    this.post_form.cycleUse = dom.value
			    	} else if(flag === 1){
						this.showOrHidden1 = 'none'
			    		this.post_form.goodsNameId = dom.id;
			    		this.post_form.goodsName = dom.innerHTML
			    	}else if(flag === 2){
				    	this.showOrHidden2 = 'none'
				    	this.post_form.goodsAttrId = dom.id;
			    		this.post_form.goodsAttr = dom.innerHTML
			    	}	
			    },
			    submitForm:function(){
			    	if(this.post_form.goodsAttr == null || this.post_form.goodsAttr ==''){
			    		$.alert("物品型号不为空","");
			    		return;
			    	}
			    	if(this.post_form.number == null || this.post_form.number ==''){
			    		$.alert("物品数量不为空","");
			    		return;
			    	}
			    	if(this.post_form.price == null || this.post_form.price ==''){
			    		$.alert("物品价格不为空","");
			    		return;
			    	}
			    	if(this.post_form.buyTime == null || this.post_form.buyTime ==''){
			    		$.alert("购买时间不为空","");
			    		return;
			    	}
			    	
			    	$.ajax({
						url : basePath + '/ls/school/property/inputStock/add',
						type : 'post',
						dataType : 'json',
						data : {
							    goodsNameId:this.post_form.goodsNameId,
							    goodsAttrId:this.post_form.goodsAttrId,
							    buyTime:    this.post_form.buyTime.replace("T", " "),
								inputId:    this.post_form.inputId,
								typeId:     this.post_form.typeId,
								typeName:   this.post_form.typeName,
								goodsName:  this.post_form.goodsName,
								goodsAttr:  this.post_form.goodsAttr,
								number:     this.post_form.number,
								price:      this.post_form.price,
								describe:   this.post_form.describe,
								placeSite:  this.post_form.placeSite,
								cycleUse:   this.post_form.cycleUse
						},
						success : function(data) {
							if (data.code == '000') {
								$.confirm("是否继续添加同一批次的物品","添加成功",function() {
									getAllType();
									vm.post_form.goodsNameId = null;
									vm.post_form.goodsAttrId = null;
									vm.post_form.buyTime = null;
									vm.post_form.typeId = null;
									vm.post_form.typeName = '请选择';
									vm.post_form.goodsName = null;
									vm.post_form.goodsAttr = null;
									vm.post_form.number = null;
									vm.post_form.price = null;
									vm.post_form.describe = null;
									vm.post_form.placeSite = null;
									vm.post_form.cycleUse = null;
									vm.post_form.inputId = data.data;
                                },function(){
									 window.location.href = (basePath + "/ls/school/property/insertStockIndex?dateTime=" + new Date().getTime());
							    },500);
							} else {
								$.toptips(data.msg);
							}
						}
					});
			    }
			}
		});

		$(function() {
			getAllType();
		})
		
		function getAllType() {
			$.ajax({
				url : basePath + '/ls/school/property/type/all',
				type : 'post',
				dataType : 'json',
				success : function(data) {
					if (data.code == '000') {
						vm.type = data.data;
					} else {
						$.toptips(data.msg);
					}
				}
			});
		}
	</script>
	<jsp:include page="/WEB-INF/page/common/_footer.jsp"></jsp:include>
</body>
</html>
